<template>
  <div class="home">
    <div class="home-top">
      <div class="user">
        <i class="user-icon"></i>
        <div class="user-address">{{address}}</div>
      </div>
      <div class="search" @click="navigateToSearch">
        <span class="search-icon"></span>
        搜索
      </div>
      <div class="kefu">
        <button open-type="contact" class="kefu-btn"><i class="kefu-icon"></i></button>
      </div>
    </div>
    <div class="banner-box">
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        :circular="circular"
      >
        <div v-for="(item,index) in carousel" :key="index">
          <swiper-item>
            <image @click="navigateToBannerActivityDetails(item.link_url)" class='banner-img' :src="item.img_url" mode="widthFix"></image>
          </swiper-item>
        </div>
      </swiper>
    </div>
    <scroll-view class="nav-view" scroll-x>
      <div class="nav-view-content" v-for="(item,index) in featuresMenu" :key="index" @click="navigateToFeaturesMenu(item.link_url)">
        <img :src="item.img_url">
        <div class="content-name">{{item.title}}</div>
      </div>
    </scroll-view>
    <div class="member-company">
      <div class="member-company-title">
        <div class="member-company-title-left">会员企业</div>
        <div class="member-company-title-right" @click="navigateToMemberCompany">更多></div>
      </div>
      <div class="member-company-inner">
        <swiper
          class="member-company-swiper-view"
          :indicator-dots="false"
          :interval="interval"
          :duration="duration"
          :circular="circular"
        >
          <div v-for="(item,index) in vipCompanyList" :key="index" >
            <swiper-item>
              <div class="scroll-view-list" @click="navigateToCompanyDetails(item)">
                <div class="scroll-view-list-left"><img :src="item.img_url"></div>
                <div class="scroll-view-list-right">
                  <div class="member-company-name"><span></span>{{item.company_name}}</div>
                  <!-- <div class="member-company-time"><span>入会时间:&nbsp&nbsp</span>{{item.created_at}}</div> -->
                  <text class="member-company-dsc">{{item.desc}}</text>
                  <div class="member-company-tag">
                    <div class="member-company-tag-list" v-for="(tag,index1) in item.label_list" :key="index1">{{tag}}</div>
                  </div>
                </div>
              </div>
            </swiper-item>
          </div>
        </swiper>
      </div>
      <div class="opener"></div>
    </div>
    <div class="prominent">
      <div class="prominent-title">
        <div class="prominent-title-left">杰出人物</div>
        <div class="prominent-title-right" @click="navigateToEliteList">更多></div>
      </div>
      <div class="prominent-inner">
        <swiper
          class="prominent-swiper-view"
          :indicator-dots="false"
          :interval="interval"
          :duration="duration"
          :circular="circular"
        >
          <div v-for="(item,index) in eliteList" :key="index" >
            <swiper-item>
              <div class="scroll-view-list" @click="navigateToEminent(item)">
                <div class="scroll-view-list-left"><img :src="item.img_url" style="border-radius:50%;"></div>
                <div class="scroll-view-list-right">
                  <div class="prominent-name"><span></span>{{item.name}}</div>
                  <!-- <div class="prominent-time"><span>入会时间:&nbsp&nbsp</span>{{item.created_at}}</div> -->
                  <text class="prominent-dsc">{{item.introduction}}</text>
                </div>
              </div>
            </swiper-item>
          </div>
        </swiper>
      </div>
      <div class="opener"></div>
    </div>
    <div class="company-history">
      <div class="company-history-title">
        <div class="company-history-title-left">商会会员</div>
        <div class="company-history-title-right" @click="navigateToMenber">更多></div>
      </div>
      <div class="company-history-inner">
        <div class="company-history-elite">
          <scroll-view class="elite-scroll-view" scroll-x>
            <div class="scroll-view-list" v-for="(item,index) in menberList" :key="index" @click="navigateToMemberCard(item.user_id)">
              <div class="elite-image" ><img :src="item.photo_url"></div>
              <div class="elite-name">{{item.realname}}</div>
              <div class="elite-office">{{item.vip_name}}</div>
            </div>
          </scroll-view>
        </div>
      </div>
    </div>
    <div class="company-style">
      <div class="company-style-title">
        <div class="company-style-title-left">商会风采</div>
        <div class="company-style-title-right" @click="navigateToChamberCommerceStyleAll">更多></div>
      </div>
      <div class="company-style-list" v-for="(item,index) in chamberCommerceStyleList" :key="index" @click="navigateToChamberCommerceStyle(item)">
        <div class="company-style-list-title">{{item.name}}</div>
        <div class="company-style-list-dsc">{{item.desc}}</div>
        <div class="company-style-list-img">
          <img :src="item.img_url" mode="widthFix">
          <div class="company-style-list-time">{{item.start_time}}</div>
        </div>
      </div>
    </div>
    <div class="newest-activity">
      <div class="newest-activity-title">
        <div class="newest-activity-title-left">最新活动</div>
        <div class="newest-activity-title-right" @click="navigateToActivity">更多></div>
      </div>
      <div class="newest-activity-list" v-for="(item,index) in activityList" :key="index" @click="navigateToActivityDetails(item)">
        <div class="newest-activity-left"><img :src="item.img_url" mode="widthFix"></div>
        <div class="newest-activity-right">
          <div class="newest-activity-name">{{item.name}}</div>
          <div class="newest-activity-start">举办时间:{{item.start_time}}</div>
          <div class="newest-activity-num">
            <div class="newest-activity-num-left">浏览量:{{item.browse_num}}</div>
            <div class="newest-activity-num-right">已报名人数:{{item.join_num}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QQMapWX from '../../../utils/qqmap-wx-jssdk.min.js'
import { mapState, mapActions } from 'vuex';
import wxParse from 'mpvue-wxparse'

export default {
  data () {
    return {
      indicatorDots: true,
      autoplay: true,
      circular: true,
      interval: 5000,
      duration: 1000,
      carousel:[],
      chamberCommerceStyleList:[],
      vipCompanyList:[],
      activityList:[],
      eliteList:[],
      menberList:[],
      limit: 1, //活动条数
      page: 1, //页码
      address:"",
      featuresMenu:[],
      loginState: false,
    }
  },
  components:{
    wxParse
  },
  computed: {
    ...mapState(['userInfo'])
  },
  onShow () {
    this.page = 1;
    this.getUserPosition();
    this.reqCarousel();
    this.reqChamberCommerceStyleList();
    this.reqVipCompanyList();
    this.reqActivityList('onPullDownRefresh');
    this.reqChamberCommerceEliteList();
    this.reqFeaturesMenu();
    this.reqChambersElite();
    this._reqUserInfo();
    this.checkLogin();
  },
  //上拉加载
  onReachBottom () {
    this.page++;
    this.reqActivityList();
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page = 1;
    this.reqCarousel();
    this.reqChamberCommerceStyleList();
    this.reqVipCompanyList();
    this.reqActivityList('onPullDownRefresh');
    this.reqChamberCommerceEliteList()
    this.reqChambersElite()
  },
  components:{
    // activityList
  },
  methods:{
    ...mapActions(['_reqUserInfo']),
    //获取会员列表
    async reqChambersElite(){
      let params = {
        limit: 8,
        page:1,
      };
      let res = await this.$api.getChambersElite(params);
      if(res.data.level == "success"){
        this.menberList = res.data.data;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    // 获取轮播图数据
    async reqCarousel(){
      let res = await this.$api.getCarousel();
      if(res.data.level == "success"){
        let data = res.data.data;
        this.carousel = data;
      }else{
        wx.showToast({
          title: '获取轮播图失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    // 获取企业风采列表
    async reqChamberCommerceStyleList(){
      let res = await this.$api.getChamberCommerceStyleList();
      if(res.data.level == "success"){
        let data = res.data.data;
        this.chamberCommerceStyleList = data;
      }else{
        wx.showToast({
          title: '获取企业风采列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    // 获取首页会员企业列表
    async reqVipCompanyList(){
      let params = {
        is_home_show: "1",
      };
      let res = await this.$api.getVipCompanyList(params);
      if(res.data.level == "success"){
        let data = res.data.data;
        this.vipCompanyList = data;
      }else{
        wx.showToast({
          title: '获取首页会员企业列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    // 获取首页活动列表
    async reqActivityList(type){
      let params = {
        limit:this.limit,
        page:this.page,
        choice: "1"
      };
      let res = await this.$api.getActivityList(params);
      if(res.data.level == "success"){
        let data = res.data.activities;
        data.forEach(item => {
          item.start_time = item.start_time.split(' ')[0];
        });
        if(type == 'onPullDownRefresh'){
          this.activityList = data;
        }else{
          this.activityList = this.activityList.concat(data);
        }
      }else{
        wx.showToast({
          title: '获取活动列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //获取首页杰出人物列表
    async reqChamberCommerceEliteList(){
      let params = {
        is_home_show: "1"
      };
      let res = await this.$api.getChamberCommerceEliteList(params);
      if(res.data.level == "success"){
        wx.stopPullDownRefresh()
        let data = res.data.data;
        this.eliteList = data;
      }else{
        wx.showToast({
          title: '获取活动列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    // 获取栏目功能列表
    async reqFeaturesMenu(){
      let res = await this.$api.getFeaturesMenu();
      if(res.data.level == "success"){
        let data = res.data.data;
        this.featuresMenu = data;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //获取用户当前定位
    getUserPosition(){
      var This = this
      // 实例化腾讯地图API核心类
      var qqmapsdk = new QQMapWX({
        //key: 'DTYBZ-MNUCV-HQOP3-UD5FF-BLBQT-ATFI2' // 必填
        key: 'M3HBZ-7XM6Q-BV356-GVOGT-4ZYLE-MJFHJ' // 必填
      });
      //1、获取当前位置坐标
      wx.getLocation({
        type: 'wgs84',
        success(res) {
          //2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
          qqmapsdk.reverseGeocoder({
            location: {
              latitude: res.latitude,
              longitude: res.longitude
            },
            success(addressRes) {
              var address = addressRes.result.ad_info.city.substring(0,addressRes.result.ad_info.city.length - 1);
              This.address = address;
            }
          })
        }
      })
    },
    checkLogin(){
      let user_token = wx.getStorageSync('userToken');
      let params = {};
      if(user_token){
        this.loginState = true;
      }
    },
    //跳转到个人名片
    navigateToMemberCard(id){
      if(!this.loginState){
        this.$currency.showToast('请先登录');
        setTimeout(()=>{
          wx.switchTab({
            url: "/pages/meMain/me/main"
          })
        }, 500)
        return
      }
      var obj = {
        userId:id,
        type:'visitor'
      }
      // this.reqInsertVipVisitorRecord(obj);
      wx.navigateTo({
        url: '/pages/meMain/memberCard/main?id='+ id
      })
    },
    //跳转到搜索页
    navigateToSearch(){
      wx.navigateTo({
        url: '/pages/homeMain/search/main'
      })
    },
    //banner图片跳转活动详情
    navigateToBannerActivityDetails(url){
      if(url.indexOf('/pages/') == -1){
        wx.navigateTo({
          url: '/pages/homeMain/webView/main?url=' + url
        })
      }else{
        wx.navigateTo({
          url: url
        })
      }
    },
    //跳转到活动详情
    navigateToActivityDetails(activity){
      wx.navigateTo({
        url: '/pages/activityMain/activityDetails/main?id=' + activity.id
      })
    },
    navigateToMemberCompany(){
      wx.navigateTo({
        url: '/pages/homeMain/memberCompany/main'
      })
    },
    //跳转会员企业页面
    navigateToEliteList(){
      wx.navigateTo({
        url: '/pages/homeMain/eliteList/main'
      })
    },
    //跳转会员企业页面
    navigateToMenber(){
      wx.switchTab({
        url: '/pages/menberMain/menber/main'
      })
    },
    navigateToFeaturesMenu(url){
      if(url == "pages/homeMain/applicationMessage/main"){
        if(!this.loginState){
          this.$currency.showToast('请先登录');
          setTimeout(()=>{
            wx.switchTab({
              url: "/pages/meMain/me/main"
            })
          }, 500)
          return
        }
        if(this.userInfo.is_submit_application == 0){
          wx.navigateTo({
            url: '/pages/homeMain/partakeForm/main'
          })
        }else{
          wx.reLaunch({
            url: '/pages/homeMain/applicationMessage/main'
          })
        }
      }else if(url == "pages/homeMain/punch/main"){
        if(!this.userInfo.user_vip){
          wx.showToast({
            title: '你不是会员,不能操作',
            icon: 'none',
            duration: 1000
          })
          return;
        }
        if(this.userInfo.user_vip.is_vip == 1){
          wx.navigateTo({
            url: '/'+ url
          })
        }else{
          wx.showToast({
            title: '你不是会员,不能操作',
            icon: 'none',
            duration: 1000
          })
        }
      }else if(url==null){
        wx.navigateToMiniProgram({
        appId: 'wx465425c053862e20',
        path: '/pages/home/main',
        // extraData: {
        //   foo: 'bar'
        // },
        envVersion: 'release',
        success(res) {
          // 打开成功
          console.log('成功打开')
        }
      })
      }
      else{
        wx.navigateTo({
          url: '/'+ url
        })
      }
    },
    //跳转到企业详情页面
    navigateToCompanyDetails(company){
      if(company.create_way=='app'){
        wx.navigateTo({
          url:'/pages/meMain/companyDetailsByTel/main?id='+ company.id
        })
      }
      wx.navigateTo({
        url: '/pages/meMain/companyDetails/main?id=' + company.id
      })
    },
    //跳转到商会精英页面
    navigateToCompanyElite(){
      wx.navigateTo({
        url: '/pages/homeMain/companyElite/main'
      })
    },
    //跳转到杰出人物详情页面
    navigateToEminent(eminen){
      wx.navigateTo({
        url: '/pages/homeMain/eminent/main?id=' + eminen.id
      })
    },
    //跳转到商会历史页面
    navigateToHistory(){
      wx.navigateTo({
        url: '/pages/homeMain/history/main'
      })
    },
    //跳转到活动列表页面
    navigateToActivity(){
      wx.switchTab({
        url: '/pages/activityMain/activity/main'
      })
    },
    //跳转到企业风采详情
    navigateToChamberCommerceStyle(chamber){
      wx.navigateTo({
        url: '/pages/homeMain/chamberCommerceStyle/main?id=' + chamber.id
      })
    },
    //跳转到企业风采列表
    navigateToChamberCommerceStyleAll(){
      wx.navigateTo({
        url: '/pages/homeMain/chamberCommerceStyleAll/main'
      })
    },
    //跳转到会费缴纳页面
    // navigateToPayment(){
    //   wx.navigateTo({
    //     url: '/pages/meMain/payment/main'
    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>
  .home{
    width: 100%;
    background-color: #f1f1f1;
    overflow-x: hidden;
    .home-top{
        display: flex;
        padding: 20rpx 40rpx;
        background: #2aa7e1;
        .user{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          margin-right: 20rpx;
          .user-address{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: #ffffff;
          }
          .user-icon{
            width: 38rpx;
            height: 38rpx;
            background-repeat: no-replace;
            background-size: 38rpx 38rpx;
            background-position: center center;
            margin-right: 4rpx;
            margin-top: 1rpx;
            background-image: url(../../../../static/images/position1.png);
          }
        }
        .kefu{
          .kefu-icon{
            width: 46rpx;
            height: 46rpx;
            background-repeat: no-replace;
            background-size: 46rpx 46rpx;
            background-position: center center;
            margin-top: 1rpx;
            background-image: url(../../../../static/images/icon-kefu.png);
          }
          .kefu-btn{
            background-color: #2aa7e1;
            padding: 0;
          }
          .kefu-btn::after{
            border: none;
          }
        }
        .search{
          width: 720rpx;
          margin-right: 24rpx;
          position: relative;
          background-color: #ffffff;
          box-sizing: border-box;
          padding-left: 54rpx;
          border-radius: 25rpx;
          height: 50rpx;
          font-size: 15px;
          line-height: 50rpx;
          color: #cccccc;
          .search-icon{
            position: absolute;
            left: 8rpx;
            top: 0;
            width: 50rpx;
            height: 50rpx;
            background-image: url(../../../../static/images/magnifier.png);
            background-position: center center;
            background-size: 50rpx 50rpx;
          }
        }
      }
    .banner-box{
      padding:20rpx 40rpx;
      background-image: url();
      background-repeat: no-repeat;
      background-color: #fff;
      background-size: 100%;
      .swiper{
        width: 100%;
        height: 350rpx;
        overflow: hidden;
        box-shadow: 0 0 8px #666;
        border-radius: 10rpx;
      }
      .banner-img{
        width: 100%;
        border-radius: 10rpx;
      }
    }
    .nav-view{
      padding: 30rpx 40rpx;
      overflow:hidden;
      white-space:nowrap;
      background-color: #fff;
      .nav-view-content{
        display: inline-block;
        width: 120rpx;
        height: 120rpx;
        padding: 10rpx;
        background-color: #fff;
        margin-right: 64rpx;
        border-radius: 50%;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .content-name{
          margin-top: 20rpx;
          font-size: 24rpx;
          text-align: center;
          color: #333333;
        }
      }
    }
    .view-inner{
      width: 100%;
      height: 20rpx;
      background-color: #fff;
    }
    .member-company,
    .prominent{
      margin-top: 14rpx;
      padding: 0 40rpx;
      background-color: #fff;
      position: relative;
      .member-company-title,
      .prominent-title{
        display: flex;
        justify-content: space-between;
        height: 70rpx;
        line-height: 76rpx;
        text-align: center;
        border-bottom: 1px solid #eaeaea;
        .member-company-title-left,
        .prominent-title-left{
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        .member-company-title-right,
        .prominent-title-right{
          font-size: 26rpx;
          color: #979696;
        }
      }
      .member-company-inner,
      .prominent-inner{
        padding: 14rpx 0 0 0;
        .member-company-swiper-view,
        .prominent-swiper-view{
          height: 300rpx;
          .scroll-view-list{
            margin-top: 50rpx;
            display: inline-block;
            width: 700rpx;
            padding: 0 20rpx;
            position: relative;
            .scroll-view-list-left{
              width: 130rpx;
              height: 130rpx;
              float: left;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .scroll-view-list-right{
              width: 478rpx;
              margin-left: 20rpx;
              float: left;
              .member-company-name,
              .prominent-name{
                font-size: 28rpx;
                line-height: 42rpx;
                color: #666666;
                span{
                  color: #333333;
                }
              }
              .member-company-time,
              .prominent-time{
                font-size: 24rpx;
                line-height: 42rpx;
                color: #666666;
                span{
                  color: #333333;
                }
              }
              .member-company-dsc{
                width: 468rpx;
                white-space:normal;
                font-size: 24rpx;
                line-height: 42rpx;
                color: #666666;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
              .prominent-dsc{
                width: 468rpx;
                white-space:normal;
                font-size: 24rpx;
                line-height: 42rpx;
                color: #666666;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
              }
              .member-company-tag,
              .prominent-tag{
                margin-top: 10rpx;
                height: 50rpx;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                .member-company-tag-list,
                .prominent-tag-list{
                  margin: 5px;
                  border-radius: 4px;
                  color: #6e6e6e;
                  background-color: #eaeaea;
                  height: 40rpx;
                  line-height: 40rpx;
                  padding: 0 10rpx;
                  margin-right: 14rpx;
                  font-size: 24rpx;
                }
              }
            }
          }
        }
      }
    }
    .company-history{
      background-color: #fff;
      padding: 0 40rpx;
      margin-top: 14rpx;
      .company-history-title{
        display: flex;
        justify-content: space-between;
        height: 70rpx;
        line-height: 76rpx;
        text-align: center;
        border-bottom: 1px solid #eaeaea;
        .company-history-title-left{
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        .company-history-title-right{
          font-size: 26rpx;
          color: #979696;
        }
      }
      .company-history-inner{
        margin-top: 20rpx;
        padding-bottom: 20rpx;
        .company-history-elite{
          .elite-scroll-view{
            overflow:hidden;
            white-space:nowrap;
            .scroll-view-list{
              display: inline-block;
              width: 140rpx;
              margin-right: 36rpx;
              .elite-image{
                width: 100%;
                height: 140rpx;
                border-radius: 50%;
                img{
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .elite-name{
                color: #333;
                font-size: 28rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
              }
              .elite-office{
                color: #aaaaaa;
                font-size: 22rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
              }
            }
          }
        }
      }
    }
    .company-style{
      padding: 0 40rpx 20rpx;
      width: 100%;
      margin-top: 14rpx;
      background-color: #fff;
      .company-style-title{
        display: flex;
        justify-content: space-between;
        height: 70rpx;
        line-height: 76rpx;
        text-align: center;
        border-bottom: 1px solid #eaeaea;
        .company-style-title-left{
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        .company-style-title-right{
          font-size: 26rpx;
          color: #979696;
        }
      }
      .company-style-list{
        margin-top: 20rpx;
        padding-bottom: 30rpx;
        .company-style-list-title{
          margin-bottom: 16rpx;
          font-size: 28rpx;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          color: #666;
          font-weight: bold;
        }
        .company-style-list-dsc{
          margin-bottom: 16rpx;
          font-size: 24rpx;
          color: #979696;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .company-style-list-img{
          position: relative;
          max-height: 350rpx;
          overflow: hidden;
          border-radius: 10rpx;
          img{
            width: 100%;
            border-radius: 10rpx;
          }
          .company-style-list-time{
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 0 0 10rpx 10rpx;
            background-color: rgba(0 ,0, 0, .5);
            color: #fff;
            font-size: 24rpx;
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 20rpx;
          }
        }
      }
    }
    .newest-activity{
      padding: 0 40rpx 20rpx;
      margin-top: 14rpx;
      background-color: #fff;
      .newest-activity-title{
        display: flex;
        justify-content: space-between;
        height: 70rpx;
        line-height: 76rpx;
        text-align: center;
        border-bottom: 1px solid #eaeaea;
        .newest-activity-title-left{
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        .newest-activity-title-right{
          font-size: 26rpx;
          color: #979696;
        }
      }
      .newest-activity-list{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20rpx 0;
        .newest-activity-left{
          width: 300rpx;
          height: 180rpx;
          overflow: hidden;
          border-radius: 12rpx;
          img{
            width: 100%;
            border-radius: 12rpx;
          }
        }
        .newest-activity-right{
          font-size: 30rpx;
          color: #333;
          margin-left: 22rpx;
          .newest-activity-name{
            width: 320rpx;
            line-height: 44rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: 666;
          }
          .newest-activity-start{
            margin-top:10rpx;
            font-size: 24rpx;
            color: #979696;
            height: 44rpx;
            line-height: 44rpx;
          }
          .newest-activity-num{
            font-size: 24rpx;
            color: #979696;
            height: 44rpx;
            line-height: 44rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
    .opener {
      width: 30rpx;
      height: 30rpx;
      transform: rotate(-45deg);
      border-bottom: 2px solid  #000000;
      border-right: 2px solid #000000;
      position: absolute;
      top: 50%;
      right: 30rpx;
      opacity: 0.5;
      animation: opener .5s ease-in-out alternate infinite;
      transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s;
    }
    @-webkit-keyframes opener {
      100% {
        right: 20rpx;
      }
    }
  }
</style>
